<!-- 
 * 瀑布流布局
 * 默认两列布局，列间距为 "12px"
 -->
<template>
	<view class="waterfall" id="waterfall" :style="{ 'column-count': count, 'column-gap': gap }">
		<view class="item" v-for="(item, index) in res" :key="index" :style="{ 'margin-bottom': gap }">
			<image class="image" :src="item.images[0]" mode="widthFix" :lazy-load="true" @click.stop="to_detail(item)"></image>
			<view style="font-weight: 555;word-break:break-all;background-color: #fff;">
				{{item.title}}
			</view>
			<view style="display: flex;justify-content: space-between;height: 60upx;background-color: #fff;">
				<view style="display: flex;margin-top: 10upx;">
					<image style="width: 50upx;height:50upx;border-radius: 25upx;vertical-align: middle;" :src="item.real_head_img" mode=""></image>
					<text style="padding-left: 10upx;" class="price">{{item.user_name}}</text>
				</view>
				<view style="margin-top: 10upx;">
					<image style="width: 35upx;height: 35upx;" src="../../static/dianzan.png" mode="" v-if="!dianzan" @click.stop="yes_no"></image>
					<image style="width: 35upx;height: 35upx;" src="../../static/dianzan1.png" mode="" v-if="dianzan" @click.stop="yes_no"></image>
					<text style="line-height: 50upx;" class="price">{{item.likeCount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// dianzan: false,
		};
	},
	props: {
		// 列表数据
		res: {
			type: Array,
			default() {
				return [];
			}
		},
		// 列数
		count: {
			type: Number,
			default: 2
		},
		dianzan: {
			type: Boolean,
			default: false
		},
		// 列间距
		gap: {
			type: String,
			default: '12px'
		}
	},

	/**
	 * 方法
	 */
	methods: {
		yes_no(e) {
			this.$emit('yes_no');
		},
		to_detail(item){
			this.$emit('to_detail',item);
		},
	}
};
</script>

<style lang="scss" scoped>
.waterfall {
	width: 100%;
	margin: 0 auto;
	column-width: auto;
}

.item {
	break-inside: avoid;
	overflow: hidden;
	border-radius: 4upx;
}

.image {
	width: 100%;
	display: block;
	background: #ffffff;
}
</style>
